<template>
  <div class="center">
    <div class="header">
  <van-nav-bar
  title="话题中心"
  left-arrow
  @click-left="onClickLeft"
>
</van-nav-bar>
</div>
<div class="mian">
  <van-list
  :finished="finished"
  @load="onLoad"
>
  <div class="huaTi" v-for="hot in List" :key="hot.id" @click="toHotDetail(hot.jump_url)">
    <div class="title">
      <img src="../images/hot.png" alt="">
      {{hot.name}}
      </div>
    <div class="view">{{hot.view}}浏览·{{hot.discuss}}参与</div>
    <van-divider />
  </div>
</van-list>
</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "@vue/runtime-core";
// import { useRouter } from 'vue-router';
import { getHot } from "../api";

// const router = useRouter()
 const List = ref([])
 const finished = ref(false);
  const onClickLeft = () => history.back();
  const onLoad = () => {
  if(List.value.length >= 28) {
    finished.value = true
  }
};
//热门话题跳转
const toHotDetail = (href) => {
   window.open(href, '_blank');
}


onMounted(() => {
 getHot().then(res => {
  //  console.log(res);
   List.value = res.data.topic_items
 })
})
</script>

<style scoped>
.header{
  position: fixed;
  width: 100%;
}
.mian{
  padding-top: 46px;
}
.huaTi{
  padding: 5px 0;
  /* padding-top: 46px; */
}
.huaTi img{
width: 16px;
height: 16px;
padding: 0 5px;
}
.view{
  color: #aaa;
  font-size: 14px;
  margin-left: 20px;
}
</style>